*{
    padding: 0;
    margin: 0;
}
body{
    background: #272727;
}

.calender{
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 12px;
    /* width: 28em; */
    /* height: calc(24em + 64px); */
    /* padding: 20px; */
    display: grid;
    grid-template-columns: repeat(7,1fr);
    grid-template-columns: repeat(6,1fr);
    grid-gap: 2px;
    /* flex-wrap: wrap; */
    color: #EFEFEF;
    
}
.bg-circle{
    position: absolute;
    display: none;
    z-index: 1;
    top: 0;
    left: 0;
    border-radius: 50%;
    width: 12em;
    height: 12em;
    background-image:radial-gradient(#7C7C7C,#2C2C2C) ;
}
/* .square_wraper{
    padding: 2px;
} */
.square{
    position: relative;
    z-index: 2;
    cursor:default;
    /* border: transparent solid 2px; */
    box-sizing: border-box;
    width: 4em;
    height: 4em;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #272727;
    /* background-blend-mode: multiply; */
}
.mon{
    font-size: 14px;
}
/* .square:hover{
    border: #7C7C7C solid 2px;
} */